<template>
    <div class="container" id="notes">
        <div class="note_container" v-for="item in noteList" :key="item._id">
            <div class="note">
                <div class="mark"></div>
                <div class="note_head">
                    <h5 class="title">{{item.title}}</h5>
                    <ul class="tools">
                        <li class="edit" @click="editNote(item)">
                           <!-- <el-button type="text"></el-button> -->
                        </li>
                        <li class="delete"  @click="delNote(item)">
<!--                            <el-button type="text"></el-button> -->
                        </li>
                    </ul>
                </div>
                <h6 class="note_info">
                    <!-- <span class="timeStamp"> {{item.createdAt.substring(0,19).replace("T"," ")}} </span> -->
					<span class="timeStamp"> {{item._updatedAt}} </span>
                    <span class="category">分类: {{item.tagName}}</span>
                </h6>
                <div class="note_content">
                    <div class="text">{{item.content}}</div>
                </div>
            </div>
        </div>
		<el-dialog title="编辑笔记" :visible.sync="dialogFormVisible" class="editnote">
		    <div class="edit_layer">
		        <div class="editor_top">
		            <input class="editor_title form-control"  type="text" 
		                placeholder="标题" style="width: 160px"  v-model="currentItem.title"  />
		            <ul class="tools">
		                <li class="save" @click="saveEdit(currentItem)"></li>
		                <li class="cancel" @click="clear(currentItem)"></li>
		            </ul>
		        </div>
		        <div class="content">
		            <template v-if="showMarkdown">
		                <textarea class="text_content form-control"  placeholder="内容" v-model="currentItem.content" > </textarea>
		            </template>
		            <template v-else>
		                <canvas_note ref="content_editDoodle"></canvas_note>
		            </template>
		        </div>
		    </div>
		</el-dialog>
    </div>
</template>
<script>
    import canvas_note from "@/components/CanvasNote.vue";
    export default {
        name: "noteItem",
        components: { canvas_note },
        data() {
            return {
                noteList: [],
                dialogFormVisible: false,
                showMarkdown: true,
                // title_edit:"",
                // content_edit:"",
				currentItem: "",
            }
        },
        methods: {
            getNoteList() {
                this.$api.noteList({
                    pageSize: 8,
                    pageNum: 1,
                    orderby: "updatedAt",
                }).then(res => {
                    //console.log(res);
					//this.noteList = res.list;
                   this.noteList = this.formatNotes(res.list);
                })
            },
            formatNotes(list){
                list = list || [];
                for(let i = 0; i < list.length; i++){
                    let item = list[i]
                    item._updatedAt = new Date(item.updatedAt).Format("yyyy-MM-dd hh:mm")
                }
                return list;
            },
            editNote(item) {
				this.currentItem = item;
                this.dialogFormVisible = true;
                //console.log(item)
                if (item.type == "0") {
                    this.showMarkdown = true;
                } else {
                    this.showMarkdown = false;
                }
            },
            saveEdit(currentItem) {
                this.$api.editNote({
                    id:this.currentItem._id,
                    title:this.currentItem.title,
                    content:this.currentItem.content,
                    tagId: this.currentItem.tagId,
                    state: 1
                }).then(res => {
                    if (res.ok == 1) {
                        //console.log(res);
                        this.clear();
                        this.dialogFormVisible = false;
                        this.getNoteList();
                    } else {
                        console.log("修改失败")
                    }
                })
            },
            clear(currentItem) {
				//console.log(currentItem)
                this.currentItem.title = "";
                this.currentItem.content = "";
				this.currentItem._updatedAt = "";
            },
            delNote(item) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.delNote({
                        id: item._id
                    }).then(res => {
                        if (res.ok == 1) {
                            // this.$message({
                            //     type: 'success',
                            //     message: '删除成功!'
                            // });
                            this.getNoteList();
                        } else {
                            // this.$message({
                            //     type: 'info',
                            //     message: '删除失败!'
                            // });
							console.log("删除失败")
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        mounted() {
            this.getNoteList();
        }
    }
</script>
<style lang="scss">
.note_container{
    .el-button {
        display: block;
        width: 100%;
        height: 100%;
    }

    .el-dialog {
        z-index: 2100;
    }

    .el-message-box__btns .el-button {
        display: inline-block;
        width: 54px;
    }

    .el-message {
        z-index: 3000 !important;
    }
}

</style>
<style scoped lang="scss">
    #notes {
        display: flex;
        flex-wrap: wrap;
		margin-top: 10px;

        .note_container {
            width: 24%;
            padding: 6px;
            height: 367px;

            .note {
                height: 345px;
                position: relative;
                border: 1px solid #bdbdbd;
                border-radius: 5px;
                padding: 10px;
                background-color: #fff;
                transition: all .15s ease-in-out;

                .mark {
                    display: none;
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    top: -8px;
                    left: -8px;
                    border-radius: 50%;
                    background: #4dabf5 url(../assets/icons/icon-done.svg) no-repeat 3px 3px;
                    background-size: 18px 18px;
                    transition: all .2s ease-in-out;
                    cursor: pointer;
                }

                .mark:hover {
                    transform: scale(1.2);
                }

                .note_head {
                    width: 100%;
                    height: 40px;
                    line-height: 40px;

                    .title {
                        height: 24px;
                        line-height: 24px;
                        padding-bottom: 6px;
                        font-size: 14px;
                        float: left;
                        border-bottom: 1px solid #bdbdbd;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        max-width: calc(100% - 60px);
                    }

                    .tools {
                        float: right;
                        margin-top: 6px;

                        li {
                            width: 20px;
                            height: 20px;
                            float: left;
                            margin-left: 10px;
                            opacity: .5;
                            transition: opacity .2s ease-in-out;
                        }

                        .edit {
                            background: url(../assets/icons/icon-edit.png) no-repeat 0 0;
                        }

                        .delete {
                            background: url(../assets/icons/icon-delete.png) no-repeat 0 0;
                        }

                        li:hover {
                            opacity: 1;
                            cursor: pointer;
                        }
                    }
                }

                .note_info {
                    font-size: 12px;
                    margin-bottom: 12px;
                    color: #757575;
                    font-weight: 300;

                    .category {
                        float: right;
                    }
                }

                .note_content {
                    width: 264px;
                    height: 276px;
                    overflow-y: scroll;
                    border: 1px solid #f8f8f8;
                    text-overflow: ellipsis;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                }
            }

            .note:hover {
                box-shadow: 0 0 6px 0 #757575;

                .mark {
                    display: block;
                }
            }
        }

    }
</style>